<template>
<div>
    <el-form>
        <el-popover ref="popover" trigger="click">
            <div>
            <el-input placeholder="过滤关键字" v-model="filterText" />
            <el-tree
            :data="treeData" 
            :props="defaultProps"
            show-checkbox
            node-key="id"
            :filter-node-method="filterNode"
            @check-change="handleCheckChange"
            :check-strictly="true"
            ref="treeSelect" 
            ></el-tree>
            </div>
        </el-popover>
<el-input width="100%" id="52" placeholder="Text field" :value="text">
<el-button slot="append" icon="el-icon-search" v-popover:popover></el-button> </el-input>
<!--<el-button icon="el-icon-search" v-popover:popover></el-button>-->
    </el-form>
</div>
</template>

<script>
import global_ from '@/common/Global'
import {doRequestPost,doRequestGet, doRequestPut, doRequestDel} from '@/utils/request'
export default {
    watch : {
        filterText(val) {
            this.$refs.treeSelect.filter(val);
        }
    },
    created() {
        var self = this
        self.treeMap = {}
        self.treeData.map(
            function(data) {
                self.initTreeMap(data, self.treeMap)
            } 
        )
    },
    computed: {
        text: function() {
            var self = this
            var textArray = self.value.map(
                function(val) {
                    var dictValue = self.treeMap[val] 
                    return dictValue.label
                }
            )
            return textArray.join(',')
        },
    },
    props: {
        value: {
            type: Array,
            default: [3]
        },
        treeData: {
            type: Array,
            default: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }]
        }
    },
    data() {
        return {
            filterText: '',
            dialogVisible: false,
            form_data: {
            },
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            treeMap: undefined,
            init: false
        }
    },
    methods: {
        initTreeMap(data, treeMap) {
            var self = this
            if (data.children &&data.children.length > 0) {
                data.children.forEach(
                    function (val) {
                        self.initTreeMap(val, treeMap)
                    }
                )                
            }
            treeMap[data.id] = {id: data.id,
                                label: data.label
                               }
        },
        initTree() {
            var self = this
            this.$refs.treeSelect.setCheckedKeys(this.value)
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        handleCheckChange(data, checked, intermidate) {
            var keys = this.$refs.treeSelect.getCheckedKeys()
            this.value = keys
            this.$emit("input", keys)
        }
    },
    mounted() {
        var self = this
        self.initTree()
    }
}

</script>